<template>
  <div class="tab-header">
    <div
      class="header-item"
      :class="{ active: item.key === activeTab }"
      v-for="item in tabList"
      :key="item.key"
      @click="activeTab = item.key"
    >
      {{ item.name }}
    </div>
  </div>
  <div class="tab-list">
    <GoodItem
      v-for="item in filterPackItemList"
      :key="item.id"
      :item="item"
    ></GoodItem>
  </div>
  <span v-if="!filterPackItemList.length">暂无物品</span>
  <div class="extra">
    <div class="text-btn-tidy" @click="handleTidy">一键整理</div>
    <div class="text-btn-sell" @click="handleSellAll">一键出售</div>
    <div class="money">{{ userMoney }}<i class="ewg-icon-jinbi"></i></div>
  </div>
</template>
<script lang="ts">
import { useStore } from "@/store";
import { computed, defineComponent, ref } from "vue";
import { MutationTypes } from "@/store/player/mutation-types";
import GoodItem from "../Pack/GoodItem.vue";
import { OptionsDataType } from "@/const/indexedDB";
import { SysActionTypes } from "@/store/sys/action-types";
const store = useStore();
export default defineComponent({
  name: "TabBox",
  components: {
    GoodItem
  },
  setup() {
    const activeTab = ref("all");
    const packItemList = computed(() => {
      return store.state.userPackage;
    });
    const filterPackItemList = computed(() => {
      return packItemList.value.filter(m => {
        if (activeTab.value === "all") {
          return true;
        } else {
          return m.type === activeTab.value;
        }
      });
    });
    const userMoney = computed(() => {
      return store.state.userInfo.money;
    });
    const handleSellAll = () => {
      let money = 0;
      const sellMulty = filterPackItemList.value
        .filter(({ isLock, grade }) => !isLock && grade < 4)
        .map(({ id, count, price, type }) => {
          money += price * count;
          if (["equipment"].includes(type)) {
            const params: OptionsDataType = {
              index: id
            };
            store.dispatch(SysActionTypes.SYS_DEL_EQUIP, params);
          }
          return {
            id,
            count
          };
        });
      store.commit(MutationTypes.REMOVE_ITEM_TO_PACKAGE_MUL, sellMulty);
      store.commit(MutationTypes.MAKE_MONEY, money);
    };
    const handleTidy = () => {
      store.commit(MutationTypes.TIDY_PACKAGE);
    };
    return {
      activeTab,
      packItemList,
      filterPackItemList,
      userMoney,
      handleSellAll,
      handleTidy,
      tabList: [
        {
          key: "all",
          name: "全部"
        },
        {
          key: "equipment",
          name: "装备栏"
        },
        {
          key: "consumables",
          name: "消耗品"
        }
      ]
    };
  }
});
</script>
<style lang="scss" scoped>
.tab-header {
  display: flex;
  margin-bottom: 10px;
  .header-item {
    cursor: pointer;
    margin-right: 10px;
    &.active {
      color: #999;
    }
    &:hover {
      color: #aaa;
    }
  }
}
.tab-list {
  display: grid;
  grid-template-columns: repeat(8, 40px);
  gap: 6px;
}
.extra {
  position: absolute;
  right: -5px;
  bottom: -20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  .money {
    margin-left: 5px;
    color: $--color-gold;
    i {
      margin-left: 5px;
    }
  }
}
</style>
